The graphic is made of lines, with x representing time and y an indicator of how much the average consumer feels about the future of the economy (100 is neutral, high is positive low is negative). There is a line for each of 9 chosen countries, and these are distinguished with facets that assign a color to one each.
The stated story is that consumer confidence has fallen across the world in 2022, which it shows well.
I think it’s a good graphic because it gives a satisfying amount of detail while still allowing comparisons between countries. The trend for each country is easy to see, and while comparing one country to another is difficult the gray lines make comparing one country to the rest of the “world” easy.
I can absolutely make lines and facets so the core of it I can do. I haven’t done layering like this before but that seems simple based on the class slides. I don’t know exactly how to make the non trendline layers like the 100 line, point, and label on the right. It shouldn’t bee to complicated though once layers are made.
As mentioned I’m not certain how to make the middle line and the text, but I think the slides give enough detail.
library(vegabrite)
library(dplyr)
Attaching package: 'dplyr'The following objects are masked from 'package:stats':
filter, lagThe following objects are masked from 'package:base':
intersect, setdiff, setequal, unionweather <- read.csv("https://calvin-data304.netlify.app/data/weather-with-dates.csv")
weather <- weather |> filter(location == "Seattle")vl_chart(width = 600, height = 400, title = "Monthly Tempuratures in Seattle") |>
vl_add_data(weather) |>
vl_mark_bar() |>
vl_encode_x("month:O") |>
vl_encode_y("temp_max:Q") |>
vl_aggregate_y("mean") |>
vl_encode_y2("temp_min:Q") |>
vl_aggregate_y2("mean") |>
vl_axis_x(title = "Month") |>
vl_axis_y(title = "Average High and Low Tempurature")Warning: Invalid schema for object passed to or created by
modify_inner_spec.vegaspec_unitvl_chart(width = 300, height = 200, title = "Monthly Tempuratures in Seattle") |>
vl_add_data(weather) |>
vl_mark_line() |>
vl_facet("weather", columns = 2) |>
vl_encode_x("month:O") |>
vl_encode_y("weather:Q") |>
vl_aggregate_y("count") |>
vl_axis_x(title = "Month") |>
vl_axis_y(title = "# Of Days Over 4 Years")# The Y axis is bad, not sure how to make it what I want without data wrangling
# I think I want a % of days in that month that are that weather
# The shape should be mostly the same thoughSomething very interesting to me that Tufte brings up is in showing time series there are graphics I normally wouldn’t think about as representing data. Showing how an animal moves in a series of pictures laid out to show time, or most interesting to me the graphic of the Rhone bridge collapse, which can’t even assign time to the x axis and instead overlays a before and after. I don’t know how much this will come up given I expect my data to be numeric, but it’s a reminder to be creative.
Playfair’s chart on wheat prices compared to wages over time (page 34) 
I chose to look at this graphic because the idea of using 3-4 different marks on one timescale is very interesting. Using a fade-out to not overlap the bars and line is clever and not something I’d consider on a computer. X is time in year, Y is shillings used for both price and weekly wage, color is used just to distinguish parts. It’s 3 layers, each of which should be simple. However the gradient to add space seems impossible in Vega-Lite, maybe a hackey solution could be made to emulate it but I doubt think anything that smooth is possible. The point is to give compare how prices and wages have changed over time, adding the current monarch at the top would have given extra historical context to help the reader.
The big lesson in this section seemed to be pay attention to the guides, axes should be labeled, consistent, and intuitive. Try to limit to what is relevant.
Always be asking what someone who doesn’t know the data or story would see first.
Part 1. - Having 2 different Y axes both in % is confusing - The response rate numbers go over the bars and are hard to read - The main point feels hard to understand, I think the point is that responses went up? but I assume completion rate is completion given they responded, so when it goes down it’s hard to know if overall there were more or less completed responses (especially with the mismatched scales)
Part 2. - The Y axis can be made into one line that starts at 0 - The marks can be arranged differently so text isn’t as necessary - Make response rate the focus, and put completion rate under response to better show their relationship (I’m assuming that’s how they work)
Part 3.
library(vegawidget)
'
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json", "data":
{ "values" :
[{"Date":"Q1-2017","Completion Rate":0.91,"Response Rate":0.023},
{"Date":"Q2-2017","Completion Rate":0.93,"Response Rate":0.018},
{"Date":"Q3- 2017","Completion Rate":0.91,"Response Rate":0.028},
{"Date":"Q42017","Completion Rate":0.89,"Response Rate":0.023},
{"Date":"Q1-2018","Completion Rate":0.84,"Response Rate":0.034},
{"Date":"Q2-2018","Completion Rate":0.88,"Response Rate":0.027},
{"Date":"Q3-2018","Completion Rate":0.91,"Response Rate":0.026},
{"Date":"Q4-2018","Completion Rate":0.87,"Response Rate":0.039},
{"Date":"Q1-2019","Completion Rate":0.83,"Response Rate":0.028}]
},
"transform": [{"calculate": "datum[\'Completion Rate\'] * datum[\'Response Rate\']", "as": "Completed Response Rate"}],
"title": "Survey Participation Rates",
"repeat": {"layer": ["Response Rate", "Completed Response Rate"]},
"spec": {
"width": 450,
"height": 300,
"mark": "bar",
"encoding": {
"x": {
"field": "Date",
"type": "nominal",
"sort": null,
"title": "Quarter"
},
"y": {
"field": {"repeat": "layer"},
"type": "quantitative",
"title": "",
"axis": {
"format": ".1%"
}
},
"color": {
"datum": {"repeat": "layer"}
}
}
}
}
' |> as_vegaspec()Bar charts are commonly used for representing amounts of things, especially categories of things. The bars should be ordered so they’re easily comparable, but don’t mess with the normal order if that’s more intuitive. Try horizontal bars to save space when the bars’ names are too long to sit side-by-side.
You might not use bars when: - You want the axis to start somewhere other than 0 - There are too many categories, making grouped bars cluttered
Dot plots can show the same things as bars, but without as much space. Heatmaps can show 2 categorical variables in a more readable way than grouped bars.
If the total of the groups is useful, then stacked bars might be worthwhile. Using facets or offsets is better for comparing each group against each other.
Figure 6.3
'
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json", "data":
{ "url": "https://calvin-data304.netlify.app/data/cow-movies.csv"
},
"width": 500,
"height": 350,
"mark": "bar",
"transform": [{"calculate": "datum.amount / 1000000", "as": "millions"}],
"encoding": {
"x": {
"field": "millions",
"type": "quantitative",
"title": "weekend gross (million USD)",
"axis": {"tickCount": 3}
},
"y": {
"field": "title",
"type": "nominal",
"sort": "-x"
}
}
}
' |> as_vegaspec()Figure 6.8
'
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json", "data":
{ "url": "https://calvin-data304.netlify.app/data/cow-income.csv"
},
"width": 500,
"height": 350,
"mark": "bar",
"transform": [{"filter": "datum.year == 2016 & datum.race != \'all\' & datum.race != \'white_non_hispanic\'"}],
"encoding": {
"x": {
"field": "race",
"type": "nominal",
"title": "",
"scale": {"domain": ["asian", "white", "hispanic", "black"]},
"axis": {"labelAngle": 0}
},
"xOffset": {
"field": "age",
"type": "ordinal"
},
"y": {
"field": "median_income",
"type": "quantitative",
"title": "median income (USD)",
"scale": {"domainMax": 100000},
"axis": {"format": "$,f"}
},
"color": {
"field": "age",
"type": "ordinal",
"title": "age (yrs)"
}
}
}
' |> as_vegaspec()Figure 6.9
'{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json", "data":
{ "url": "https://calvin-data304.netlify.app/data/cow-income.csv"
},
"width": 250,
"height": 175,
"mark": "bar",
"transform": [{"filter": "datum.year == 2016 & datum.race != \'all\' & datum.race != \'white_non_hispanic\'"}],
"encoding": {
"facet": {
"field": "race",
"type": "nominal",
"title": "",
"columns": 2
},
"x": {
"field": "age",
"type": "ordinal",
"title": "age (yrs)",
"axis": {"labelAngle": 30}
},
"y": {
"field": "median_income",
"type": "quantitative",
"title": "median income (USD)",
"scale": {"domainMax": 100000},
"axis": {"format": "$,f"}
}
}
}
' |> as_vegaspec()Figure 6.11
'
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json", "data":
{ "url": "https://calvin-data304.netlify.app/data/cow-gapminder.csv"
},
"transform": [{"filter": "datum.year == 2007 & datum.continent == \'Americas\'"}],
"width": 500,
"height": 350,
"mark": "point",
"encoding": {
"x": {
"field": "lifeExp",
"type": "quantitative",
"scale": {"zero": false},
"title": "life expectancy (years)"
},
"y": {
"field": "country",
"type": "nominal",
"sort": "-x",
"title": ""
}
}
}
' |> as_vegaspec()Figure 6.12 is ‘bad’ because it wastes space showing 0 when it doesn’t matter, making the difference the graph wants to show smaller and harder to read.
Figure 6.13 is ‘bad’ because without any order it’s hard to tell how we’re supposed to compare points. It takes a lot of effort to get a big picture of life expectancy, instead the reader hasto individually find single countries to compare.
at 37:00 the background is on Tufte page 31 41:13, the Napoleon’s army in Russia, page 41
There is a square point mark at every combination of x and y in the frame, then color is the indicator of some quantitative field.
Figure 6.14
'
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json", "data":
{ "url": "https://calvin-data304.netlify.app/data/cow-internet2.csv"
},
"width": 500,
"height": 350,
"mark": {
"type": "point",
"shape": "square",
"size": 340
},
"encoding": {
"x": {
"field": "year",
"type": "nominal"
},
"y": {
"field": "country",
"type": "nominal"
},
"fill": {
"field": "users",
"type": "quantitative"
}
}
}
' |> as_vegaspec()I didn’t find out how to sort by a specific value in time, may update later. Same with the NA holes but those might be easier to do in R
Color differences are hard to see when not right next to each other
There is enough of a trend to make a clear gradient, the story doesn’t need specific detail to the point that the exact value matters. The location of the dark bars are the story rather than their exact color. I don’t think it’s a dealbreaker for the figure in part b, but it is a problem. It’s hard to get a reference for any of the exact values, just which country uses more in general in a given year. It makes it less detailed than would be nice but the big picture is mostly intact.
Comparing the position of points/bars is way easier than the angle/distance of an arc. Bars are usually better.
He argues that pie charts have at least some use, like for quickly showing which party is in majority since judging if a c=slice is >50% is pretty simple. Bars are better for relative sizes but might not show proportion as easily.
He compares them to stacked bars and side-by-side bars. Pies are best for quickly showing very simple fractions like 1/2, otherwise stacked bars can also show proportion and side-by-side can also show small datasets. For relative proportions and many small parts side-by-side bars are best, and stacked bars are great for time series since they’re basically one dimensional.
'
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json", "data":
{ "values": [
{"party":"CDU/CSU", "seats":243},
{"party":"FDP", "seats":39},
{"party":"SPD", "seats":214}
]
},
"width": 500,
"height": 350,
"mark": "arc",
"encoding": {
"theta": {
"field": "seats",
"type": "quantitative"
},
"color": {
"field": "party",
"type": "nominal"
}
}
}
' |> as_vegaspec()